import type { FunctionalComponent } from 'vue'

interface LoadingComponentProps {
  title: string
  fullscreen: boolean
}
export const LoadingComponent: FunctionalComponent<
  Partial<LoadingComponentProps>
> = (props) => {
  const fullscreen = props?.fullscreen ?? false

  return (
    <div
      class="b-loading overflow box-border"
      style="position:relative;width:100%;height:100%;"
    >
      <div
        class="boxs"
        style={[
          'scale: 2;',
          !fullscreen && 'top: 40%;left: 0px;',
        ]}
      >
        <div class="box">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="box">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="box">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="box">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div
        class="text"
        style="bottom: 20%;"
        data-text={props.title ?? '加载中...'}
      >
      </div>
    </div>
  )
}
